<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item" v-if="~accessable.indexOf('system:admin_add')" type="primary" v-waves icon="el-icon-plus" @click="handleUpdate(null)">添加</el-button>
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="账号名称" v-model="filters.like$username"></el-input>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" v-if="~accessable.indexOf('system:admin_export')" type="primary" v-waves icon="el-icon-document" @click="exportExcelAdminRole">导出账户权限</el-button>
    </div>
    <el-table :height="tableHeight" :data="list" @sort-change="sortChange" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
      style="width: 100%">
      <el-table-column align="center" type="index" label="序号" width="80">
      </el-table-column>
      <el-table-column sortable="custom" prop="username" align="center" label="账户名称" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.username}}</span>
        </template>
      </el-table-column>
      <el-table-column width="300" align="center" label="角色">
        <template slot-scope="scope">
          <span v-for="role in scope.row.roles" :key="role.id">

            <el-tag>{{role.role_name}}</el-tag>
            &nbsp;
          </span>
        </template>
      </el-table-column>
      <el-table-column width="180" sortable="custom" prop="createTime" align="center" label="创建时间">
        <template slot-scope="scope">
          <span>{{scope.row.createTime}}</span>
        </template>
      </el-table-column>
      <el-table-column width="100" sortable="custom" prop="status" align="center" label="状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusTagFilter">{{scope.row.status|statusFilter}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="230" class-name="small-padding">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" v-if="~accessable.indexOf('system:admin_modify')" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button v-if="scope.row.username!='admin' && scope.row.status==0 && ~accessable.indexOf('system:admin_froze')" size="mini" @click="handleModifyStatus(scope.row,'frozen')">停用</el-button>
          <el-button v-if="scope.row.username!='admin' && scope.row.status==1 && ~accessable.indexOf('system:admin_unfroze')" size="mini" @click="handleModifyStatus(scope.row,'unFrozen')">启用</el-button>
          <el-button v-if="scope.row.username!='admin' && ~accessable.indexOf('system:admin_delete')" size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="params.page"
        :page-sizes="[10,20,30, 50]" :page-size="params.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <el-dialog :title="isEditing?'修改':'添加'" :visible.sync="dialogFormVisible">
      <el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="120px" style='width: 400px; margin-left:50px;'>
        <el-form-item label="账户名称" prop="username">
          <el-input v-model="temp.username" :readonly="isEditing"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="roleIds">
          <el-checkbox-group v-model="temp.roleIds">
            <el-checkbox :label="role.id" :key="role.id" v-for="role in roleList">{{role.roleName}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="设置密码" prop="pwd">
          <el-input v-model="temp.pwd" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" :loading="submiting" @click="submitFormAction">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import baseMixin from '../../mixins/baseMixin'
let statusMap = ['正常', '冻结']
export default {
  mixins: [baseMixin],
  data () {
    return {
      tableHeight: 0,
      total: 0,
      roleList: [],

      temp: {
        id: '',
        roleIds: [],
        username: '',
        pwd: ''
      },
      role_options: [],
      rules: {
        username: [{
          required: true,
          message: '账户名称不能为空',
          trigger: 'change'
        }],
        roleId: [{
          required: true,
          message: '角色不能为空',
          trigger: 'change'
        }]
      }
    }
  },
  created () {
    this.init('admin', 1).loadData()
    this.combOptions('role').then(rt => {
      if (rt.data && rt.data.errcode == 0) {
        this.role_options = rt.data.info
      }
    })
    this.$get('/admin/admin_role/role_list').then(data => {
      this.roleList = data
    })
    this.tableHeight = window.innerHeight - 300
  },
  filters: {
    statusFilter (status) {
      return statusMap[parseInt(status)]
    },
    statusTagFilter (status) {
      return ['success', 'danger'][parseInt(status)]
    }
  },
  methods: {
    __onAfterHandleEditUpdate (row) {
      let ids = []
      row.roles && row.roles.forEach(element => {
        ids.push(element.id)
      })
      this.temp.roleIds = ids
    },
    __onFormSubmit (row) {
      this.temp._roleIds = this.temp.roleIds.join(',')
    },
    exportExcel (method, options) {
      this._parseFilters()
      this._parseParams()
      return this.$model.addParam(options).query('/admin/' + method)
    },
    exportExcelFile () {
      this.exportExcel('admin_role/exportExcel', {
        title: '账户管理',
        fields: [{
          field: 'username',
          title: '账号名称'
        },
        {
          field: 'createTime',
          title: '创建时间'
        },
        {
          field: 'roleName',
          title: '角色'
        },
        {
          field: 'status',
          title: '状态',
          valueMap: ['正常', '冻结']
        }
        ]
      }).then(res => {
        if (res.data.errcode == 0) {
          this.openWin(res.data.info)
        } else {
          this.$error(res.data.info)
        }
      })
    },
    exportExcelAdminRole () {
      this.exportExcel('/admin_role/exportExcel_admin_role', {
        title: '账户权限',
        fields: [
          {
            field: 'username',
            title: '账号'
          },

          {
            field: 'role_name',
            title: '角色'
          },

          {
            field: 'p1_name',
            title: '一级权限'
          },

          {
            field: 'p2_name',
            title: '二级权限'
          },

          {
            field: 'p3_name',
            title: '三级权限'
          },

          {
            field: 'p4_name',
            title: '四级权限'
          }
        ]
      }).then(info => {
        this.openWin(info)
      })
    },
    handleModifyStatus (row, tag) {
      let id = row.id
      if (tag == 'unFrozen') {
        this.$post('/admin/admin/unFrozen', {
          id
        }).then(_ => {
          row.status = 0
          this.$success()
        })
      } else if (tag == 'frozen') {
        this.$post('/admin/admin/frozen', {
          id
        }).then(_ => {
          row.status = 1
          this.$success()
        })
      }
    }
  }
}

</script>
